<template>
	<view class="searchContainer">
		

		<!-- 头部搜索 -->
		<view class="searchWrap">

			<view class="search">
				<image class="searchImg" src="../../static/images/home/search.png"></image>
				<input class="searchText" :placeholder="placeholder" placeholder-class="adv"></input>
			</view>
			<view class="search_btn">
				搜索
			</view>
		</view>
		<!-- 搜索发现 -->
		<view class="searchFind">
			搜索发现
		</view>
		<!-- 热词 -->
		<view class="hotWords" >
			<view class="word" :class="{activity:word.querySubType === 991,goods:word.querySubType === 992}" v-for="(word,index) in searchInfo.words" :key='word.traceId'>
				<text>{{word.queryName}}</text>
				<text v-if="word.querySubType === 991" :class="{activity:word.querySubType === 991}" class="des">活动</text>
				<text v-if="word.querySubType === 992" :class="{goods:word.querySubType === 992}" class="des">商品</text>
			</view>
		</view>
		<!-- searchBanner -->
		<view class="searchBanner">
			<image :src="searchInfo.searchBanner.imgUrl" mode=""></image>
		</view>
	</view>	
</template>


<script>
	import {mapGetters} from 'vuex'
export default {
	name: 'Search',
	data() {
		return {
			placeholder:'搜一搜'
		};
	},
	computed: {
		...mapGetters(['searchInfo']),
		placeholderList() {
			return this.searchInfo.words?.reduce((prev,item) => {
				prev.push(item.queryName)
				return prev
			},[])
		}
	},
	mounted() {
		this.getSearchInfo();
		
	},
	onShow() {
	 this.changePlaceholder()
	},
	onHide() {
		clearInterval(this.timer)
		this.timer=null
	},
	methods: {
		getSearchInfo() {
			this.$store.dispatch('getSearchInfo');
		},
		changePlaceholder(){
			let index=0;
			this.timer=setInterval(() => {		
					if(index < this.placeholderList.length){
						// console.log(index)
						this.placeholder = this.placeholderList[index++]
					}else{
						index = 0
						this.placeholder = this.placeholderList[index]
					}						
			},2000)
		}		
	}
};
</script>

<style lang="scss">
// 搜索
.searchContainer{
	height: 100%;
	background-color: #FFFFFF;
	
// 搜索	
	.searchWrap {
		height: 112rpx;
		// background-color: pink;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 0 40rpx;
	
		.search {
			background-color: #E5E5E5;
			// width: 608rpx;
			flex: 1;
			height: 64rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			border-radius: 32rpx;
			.searchImg {
				width: 40rpx;
				height: 40rpx;
				margin: 0 20rpx;
			}
			.searchText {
				// width: 528rpx;
				flex: 1;
				height: 40rpx;
				font-size: 28rpx;
				opacity: 0.4;
				color: rgb(51, 51, 51);
				// background-color: #FFFFFF;
			}
			.adv{
				// color: red;
				transition: 1s;
			}
		}
		
		.search_btn{
			width: 106rpx;
			height: 64rpx;
			background-color: pink;
			text-align: center;
			line-height: 64rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			border-radius: 30rpx;
			margin-left: 30rpx;
			background-color: #CD8C39;
		}
	}
//搜索发现
	.searchFind{
		padding: 40rpx 40rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #333333;
	}
// 热词
	.hotWords{
		padding: 0 40rpx;
		display: flex;
		flex-wrap: wrap;
		// justify-content: space-between;
		align-items: center;
		.word{
			color: #333333;
			display: flex;
			padding: 0 20rpx;
			height: 60rpx;
			font-size: 24rpx;
			align-items: center;
			border-radius: 30rpx;
			margin: 0 10rpx 10rpx 0;
			background-color: #F4F4F4;
			// background-color: skyblue;
			&.activity{
				color: rgb(253, 102, 0);
			}
			&.goods{
				color: rgb(255, 48, 102);
			}
			text{
				margin-right: 4rpx;
			}
			.des{
				border: 1rpx solid #333333;
				border-radius: 8rpx;
				&.activity{
					border: 1rpx solid rgba(253, 102, 0,.4);;
				}
				&.goods{
					border: 1rpx solid rgba(255, 48, 102,.4);;
				}
			}
		}
	}
//图片 searchBanner
	.searchBanner{
		margin: 20rpx 40rpx;
		// height: 68rpx;
		image{
			width: 100%;
			height: 136rpx;
			border-radius: 18rpx;
		}
	}
}

</style>
